<template>
  <ul>
    <li><p>出售</p></li>
    <li><p>购买<span>¥2400</span></p></li>
  </ul>
</template>

<script>
export default {
  name:'', 
  data () {
    return {
    }
  }
}
</script>
<style scoped>
  ul{
    width: 100%;
    height: 50px;
    display: flex;
    border-top: 1px solid black;
    position: fixed;
    bottom: 0;
  }
  /* 出售 */
  li:nth-child(1){
    width: 30%;
    height: 100%;

  }
  li:nth-child(1) p{
    width: 100;
    height: 100%;
    line-height: 50px;
    text-align: center;
    font-weight: bolder;
    font-size: 12px;
    color: gray;
    background-color: white;
  }
  /* 购买 */
  li:nth-child(2){
    width: 70%;
    height: 100%;
    background-color: darkslateblue;
    line-height: 50px;
    text-align: center;
    font-weight: bolder;
  }
li:nth-child(2) p{
  color: white;
  font-size: 12px;
}
li:nth-child(2) p span{
  color: aquamarine;
}
</style>